<template>
    <div>
        <div class="flex justify-center">
            <div class="md:w-2/5 w-full relative flex justify-center items-center">
                <img
                    class="w-full"
                    src="https://png.pngtree.com/thumb_back/fw800/back_our/20190617/ourmid/pngtree-small-fresh-and-elegant-flowers-and-plants-border-h5-background-material-image_125765.jpg"
                    alt="bg"
                />
                <div class="absolute w-4/5 h-4/5">
                    <textarea class="w-full h-full text-black text-bg text-xl" maxlength="300" v-model="textContent" />
                </div>
                <div class="absolute top-0 right-10 mt-5 text-right font-mono">{{ dateProp }}</div>
            </div>
        </div>
        <div class="flex justify-center py-5">
            <button @click="save" class="text-white bg-gradient-to-r from-red-400 to-yellow-500 px-5 py-2">
                保存日记
            </button>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs'

// api
import { addComment } from '../api/comment'

export default {
    computed: {
        dateProp() {
            return dayjs().format('YYYY年MM月DD日')
        },
    },

    data: () => ({
        signList: [],
        textContent: '',
    }),

    methods: {
        async save() {
            const {
                data: { message, success },
            } = await addComment(this.$http, { account: this.$store.state.user.account, content: this.textContent })
            window.alert(message)
            if (!success) return
            this.$router.back(1)
        },
    },
}
</script>

<style scoped>
.text-bg {
    background-color: rgba(0, 0, 0, 0);
}

textarea {
    background: none;
    outline: none;
}
textarea:focus {
    border: none;
}

button {
    outline: none;
}
</style>
